<template>
  <div class="page-container">
    <Head></Head>
    <div class="notice">
      <div class="icon"><i class="iconfont icon-xiaolaba"></i></div>
      <vue3-seamless-scroll class="scroll" :list="boardcastList"  direction="left" :hover="true" :singleLine="true"
                            :step="0.4">
        <div v-for="item in boardcastList" >
          <span class="item">{{ item }}</span>
        </div>
      </vue3-seamless-scroll>

    </div>
    <div class="swiper">
      <el-carousel :autoplay="false" arrow="always" height="100%" motion-blur>
        <el-carousel-item class="item" v-for="item in eventList" :key="item.id">
          <div class="pic">
            <img :src="item.eventImg" alt="">
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="day">
      <div class="title">{{$t('AI日报')}}</div>
      <div class="content">{{dayReport.reportContent}}</div>
    </div>
    <div class="day">
      <div class="title">{{$t('AI周报')}}</div>
      <div class="content">{{weekReport.reportContent}}</div>
    </div>

    <div class="charts">
      <div class="title">{{$t('AI趋势分析')}}</div>
      <div id="charts"></div>
    </div>
  </div>
</template>

<script>
  import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
  import * as echarts from 'echarts';
  import * as api from "@/api";
  import Head from './head'
  export default {
    name: "index",
    components: {
      Vue3SeamlessScroll,
      Head
    },
    data() {
      return {
        boardcastList: [],
        announcement: [],
        dayReport: {
          "id": 0,
          "creator": 0,
          "createDate": "2019-08-24T14:15:22.123Z",
          "delFlag": "string",
          "reportName": "string",
          "reportType": "string",
          "reportDate": "string",
          "reportContent": "string",
          "reportContentEn": "string",
          "reportDispose": "string",
          "companyId": 0
        },
        weekReport: {
          "id": 0,
          "creator": 0,
          "createDate": "2019-08-24T14:15:22.123Z",
          "delFlag": "string",
          "reportName": "string",
          "reportType": "string",
          "reportDate": "string",
          "reportContent": "string",
          "reportContentEn": "string",
          "reportDispose": "string",
          "companyId": 0
        },
        axis: [],
        data: [],
        rate: 0,
        eventList: []
      }
    },
    methods: {
      initCharts() {
        let that = this;
        var myChart = echarts.init(document.getElementById('charts'));
        let option = {
          tooltip: {
            trigger: 'axis',
            showContent: false,
          },
          grid: {
            top: '10',
            bottom: '0',
            left: '60',
            right: '120',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: that.axis,
            boundaryGap: false,
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#666',
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 12,
                color: 'rgba(234, 234, 234, 1)',
                fontFamily: 'PingFang SC',
                lineHeight: 24
              }
            },
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show: false,
              lineStyle: {
                color: '#666',
              }
            },
            splitLine: {
              lineStyle: {
                color: '#333',
                type: 'dashed'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 12,
                color: 'rgba(234, 234, 234, 1)',
                fontFamily: 'PingFang SC',
                lineHeight: 24
              }
            },
          },
          series: [
            {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: that.rate, color: 'rgba(30, 200, 98, 1)' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#007bff' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              },
              data: that.data,
              type: 'line',
              smooth: true,
              lineStyle: {
                width: 3,
              },
              showSymbol: true,
              symbol: 'image://',
              symbolSize: 14,
            }
          ]
        }
        myChart.setOption(option);
      },
      async getEventPage() {
        try {
          const {data} = await api.getEventPage({
            page: 1,
            count: 10,
            orderByDesc: 'create_date'
          });
          if (!data.code && data.data) {
            console.log(data.data)
            this.eventList = data.data.records
          }
        } catch (e) {
          console.log(e)
        }
      },
      async getDayReport() {
        try {
          const {data} = await api.lastDailyReport();
          if (!data.code && data.data) {
            this.dayReport = data.data
          }
        } catch (e) {
          console.log(e)
        }
      },
      async getWeekReport() {
        try {
          const {data} = await api.lastWeeklyReport();
          if (!data.code && data.data) {
            this.weekReport = data.data
          }
        } catch (e) {
          console.log(e)
        }
      },
      async wnAnnouncement() {
        try {
          const {data} = await api.wnAnnouncement({
            page: 1,
            count: 10
          });
          if (!data.code && data.data) {
            this.announcement = data.data.records
            let arr  = this.announcement.map(item => (item.annoTitle ? item.annoTitle + '：': '') + item.annoContent + ' ')
            this.boardcastList = arr.concat(arr)
          }
        } catch (e) {
          console.log(e)
        }
      },
      async getData() {
        try {
          const {data} = await api.aiAnalysis();
          if (!data.code) {
            let arr = data.data
            let axis1 = arr[0].seriesData.map(item => item.eventDate);
            let axis2 = arr[1].seriesData.map(item => item.eventDate);
            this.axis = axis1.concat(axis2);
            let data1 = arr[0].seriesData.map(item => item.eventCount);
            let data2 = arr[1].seriesData.map(item => item.eventCount);
            this.data = data1.concat(data2);
            this.rate = (data1.length - 1) / this.data.length
            this.initCharts();
          }
        } catch (e) {
          console.log(e)
        }
      },
    },
    mounted() {
      this.getData();
      this.wnAnnouncement()
      this.getDayReport();
      this.getWeekReport()
      this.getEventPage()
    }
  }
</script>

<style scoped lang="scss">
  .page-container{
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
    height: 100%;
    padding-bottom: 80px;

    .notice{
      width: 100%;
      height: 36px;
      background: #181818;
      border-radius: 8px 8px 8px 8px;
      @include clear;
      margin-top: 12px;
      margin-bottom: 12px;
      .icon{
        width: 40px;
        height: 36px;
        float: left;
        display: flex;
        justify-content: center;
        align-items: center;
        i{
          font-size: 18px;
          color: $color;
        }
      }
      .scroll{
        width: calc(100% - 40px);
        float: left;
        overflow: hidden;
        line-height: 36px;
        font-weight: 400;
        font-size: 12px;
        color: #FFFFFF;
        .item{
          margin-right: 20px;
        }
      }
    }
    .swiper{
      width: 100%;
      aspect-ratio: 343 / 160;
      background: #425540;
      border-radius: 16px 16px 16px 16px;
      overflow: hidden;
      margin-bottom: 16px;
      .item{
        width: 100%;
        height: 100%;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        .pic{
          width: 100%;
          height: 100%;
          img{
            @include fit(cover);
          }
        }
      }

      :deep(.el-carousel){
        height: 100%;
        .el-carousel__indicator--horizontal{
          height: 10px;
          display: inline-flex;
          align-items: center;
        }
        .el-carousel__arrow--left{
          background: rgba(57,234,136,0.4);
        }
        .el-carousel__arrow--right{
          background: rgba(57,234,136,0.4);
        }
        .el-carousel__button{
          width: 4px;
          height: 4px;
          background: rgba(57,234,136,0.4);
          border-radius: 50%;
          opacity: 1;
        }
        .is-active{
          .el-carousel__button{
            width: 6px;
            height: 6px;
            background-color: $color;
            position: relative;
            top: 1px;
          }
        }
      }
    }
    .day{
      width: 100%;
      margin-bottom: 16px;
      .title{
        width: 100%;
        font-weight: 500;
        font-size: 14px;
        color: #FFFFFF;
        margin-bottom: 12px;
      }
      .content{
        width: 100%;
        box-sizing: border-box;
        padding: 16px;
        background: #181818;
        border-radius: 16px 16px 16px 16px;
        font-weight: 400;
        font-size: 12px;
        color: #D8D8D8;
        line-height: 18px;
      }
    }
    .charts{
      width: calc(100%);
      overflow: hidden;
      .title{
        font-weight: 500;
        font-size: 14px;
        color: #FFFFFF;
        margin-bottom: 12px;
        box-sizing: border-box;
        padding-left: 0px;

      }
      #charts{
        width: calc(100% + 120px);
        margin-left: -40px;
        height: 200px;
      }
    }
  }
</style>
